//显示单个日程
import React, {Component} from 'react'
import {View, Text, WebView, Button, TouchableOpacity} from 'react-native'
import Loading from '../common/loading'
import styles from "../../configs/styles";
import {I18n} from "../../configs/enumeration";
import {GetPlanApi, DestroyPlanApi} from "../../configs/api";
import HTMLView from 'react-native-htmlview';
import Icon from 'react-native-vector-icons/Ionicons'


class planShow extends Component {
  static navigationOptions = ({navigation}) => {
    const {params} = navigation.state;
    if (params != undefined) {
      const _headerRight = (
        <View style={{flexDirection: 'row'}}>
          <TouchableOpacity onPress={params.editPlan} style={{marginRight: 15}}>
            <Icon name={'ios-create-outline'} size={32} color={'white'}/>
          </TouchableOpacity>
          <TouchableOpacity onPress={params.destroyPlan} style={{marginRight: 10}}>
            <Icon name={'ios-trash-outline'} size={32} color={'white'}/>
          </TouchableOpacity>
        </View>
      );
      return {
        headerRight: _headerRight
      }
    }
  };

  constructor(props) {
    super(props);
    const params = props.navigation.state.params;
    this.state = {
      plan_id: params.plan_id,
      data: [],
      loading: true,
      afterDestroy: params.afterDestroy
    };
  }

  componentDidMount() {
    this.getData();

    this.props.navigation.setParams({
      editPlan: this.editPlan,
      destroyPlan: this.destroyPlan
    })
  }

  getData = () => {
    GetPlanApi(this.state.plan_id).then((data) => {
      this.setState({
        data: data.plan_attrs,
        loading: false
      })
    })
  };

  destroyPlan = () => {
    DestroyPlanApi({plan_id: this.state.plan_id}).then((response) => {
      this.state.afterDestroy(response.happened_at);
      this.props.navigation.goBack()
    })
  };

  editPlan = () => {
    this.props.navigation.navigate('planEdit', {
      plan_id: this.state.plan_id,
      afterUpdate: () => {
        this.getData()
      }
    })
  };

  render() {
    const {loading, data} = this.state;
    if (loading) {
      return <Loading/>
    } else {
      return (
        <View style={styles.planShowContainer}>
          <View style={styles.planShowItem}>
            <View style={{marginTop: 20}}><Text style={{fontSize: 18}}>{data.title}</Text></View>
            <View style={{marginTop: 15}}><Text style={{color: '#838BA5'}}>开始：{data.start_at}</Text></View>
            <View style={{marginTop: 10}}><Text style={{color: '#838BA5'}}>结束：{data.end_at}</Text></View>
            <View style={{marginTop: 10, marginBottom: 15}}><Text style={{color: '#838BA5'}}>地点：{data.address}</Text></View>
          </View>
          <View style={styles.planShowItem}>
            <View style={{marginTop: 15}}><Text style={{fontSize: 18}}>备注</Text></View>
            <View style={{marginTop: 10, marginBottom: 15}}><Text style={{color: '#838BA5'}}>{data.content}</Text></View>
          </View>




          {/*<View style={styles.apply_base_block}>*/}
            {/*<View>*/}
              {/*<Text style={styles.apply_title_text}>名称</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.apply_base_block_right}>*/}
              {/*<Text style={styles.apply_info_text}>{data.title}</Text>*/}
            {/*</View>*/}
          {/*</View>*/}

          {/*<View style={styles.apply_base_block}>*/}
            {/*<View>*/}
              {/*<Text style={styles.apply_title_text}>类型</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.apply_base_block_right}>*/}
              {/*<Text style={styles.apply_info_text}>{data.plan_type}</Text>*/}
            {/*</View>*/}
          {/*</View>*/}

          {/*<View style={styles.apply_base_block}>*/}
            {/*<View>*/}
              {/*<Text style={styles.apply_title_text}>时间</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.apply_base_block_right}>*/}
              {/*<Text style={styles.apply_info_text}>{data.start_at}-{data.end_at}</Text>*/}
            {/*</View>*/}
          {/*</View>*/}

          {/*<View style={styles.apply_base_block}>*/}
            {/*<View>*/}
              {/*<Text style={styles.apply_title_text}>地点</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.apply_base_block_right}>*/}
              {/*<Text style={styles.apply_info_text}>{data.address}</Text>*/}
            {/*</View>*/}
          {/*</View>*/}

          {/*<View style={styles.apply_base_block}>*/}
            {/*<View>*/}
              {/*<Text style={styles.apply_title_text}>参与人</Text>*/}
            {/*</View>*/}
            {/*<View style={styles.apply_base_block_right}>*/}
              {/*<Text style={styles.apply_info_text}>{data.members}</Text>*/}
            {/*</View>*/}
          {/*</View>*/}

          {/*<View style={styles.apply_base_block}>*/}
            {/*<View>*/}
              {/*<HTMLView value={data.content}/>*/}
            {/*</View>*/}
          {/*</View>*/}

          {/*<Button*/}
            {/*title={'删除'}*/}
            {/*onPress={() => {*/}
              {/*this.destroyPlan()*/}
            {/*}}*/}
            {/*// disabled={this.props.user.status != null}*/}
            {/*color={'#5daeff'}*/}
          {/*/>*/}

          {/*<Button*/}
            {/*title={'修改'}*/}
            {/*onPress={() => {*/}
              {/*this.editPlan()*/}
            {/*}}*/}
            {/*// disabled={this.props.user.status != null}*/}
            {/*color={'#5daeff'}*/}
          {/*/>*/}

        </View>
      )
    }
  }
}

export default planShow